import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        list: [],
        inputValue: 'AAA',
        length: 5,
        viewKey: 'all'
            // viewList: []
    },
    mutations: {
        // 从异步方法中调用赋值到数据中
        setData(state, result) {
            state.list = result
                // state.viewList = result
        },
        setInputValue(state, result) {
            state.inputValue = result
        },
        addItem(state) {
            const obj = {
                id: state.length,
                info: state.inputValue,
                done: false
            }
            state.list.push(obj)
            state.length++
                state.inputValue = ''
        },
        // 根据id值查找出对应的项 然后删除
        removeItemById(state, id) {
            var i = state.list.findIndex(item => item.id === id)
            console.log('删除的项目是' + i);
            if (i != -1) {
                // 找到删除的索引并且删除
                state.list.splice(i, 1)
            }
        },

        changeStateById(state, info) {
            // 根据传入的id和checkbox的状态 设置数据
            const index = state.list.findIndex(item => item.id === info.id)
            if (index != -1) {
                state.list[index].done = info.state
            }
        },
        clearDone(state) {
            state.list = state.list.filter(item => item.done === false)
        },
        // 不同的选择对应不同的显示条目
        // all undo done
        changeViewKey(state, key) {
            state.viewKey = key

            // 第一种实现方式
            // console.log('我被点击了 +++++++ ');
            // if (key === 'all') {
            //     state.viewList = state.list
            // } else if (key === 'undo') {
            //     state.viewList = state.list.filter(item => item.done === false)
            // } else if (key === 'done') {
            //     state.viewList = state.list.filter(item => item.done === true)
            // }
            // console.log('可视的列表 ' + state.viewList);

        }
    },
    actions: {
        // 异步请求数据 并且赋值到共享数据中
        getData(context) {
            // axios.get('./list.json').then(function (param) {
            //   console.log(param);
            //   context.commit('setData', param)
            // })

            axios.get('./list.json').then(({ data }) => {
                console.log(data);
                context.commit('setData', data)
            })
        }
    },
    getters: {
        // 数据的包装处理
        // 未完成的任务个数
        undoLength(state) {
            return state.list.filter(item => item.done === false).length
        },

        // 第二种实现方式  定义计算属性
        infoList(state) {
            if (state.viewKey === 'all') {
                return state.list
            }
            if (state.viewKey === 'undo') {
                return state.list.filter(item => item.done === false)
            }
            if (state.viewKey === 'done') {
                return state.list.filter(item => item.done === true)
            }

            return state.list
        }
    }
})